<template>
	<div class="doctor_home">
		<div class="yygh_search">
			<ul>
				<li>
					<router-link to="/yygh" title="预约挂号" class="hover">预约挂号</router-link>
				</li>
				<li>
					<router-link to="/personal/history" title="我的预约" class="my_app">我的预约</router-link>
				</li>
			</ul>
		</div>
		<div class="content">
			<position>
				<router-link to="/">首页</router-link>
				&gt;
				<router-link to="/yygh">预约挂号</router-link>
				&gt;
				<router-link to="/yygh">选择科室医生</router-link>
				&gt;
				<span class="last">{{doctor.doctorName}}</span>
			</position>
			<div class="left_content">
				<!-- 医生简介 -->
				<div class="doctor_introduce">
					<div class="doctor_img">
						<img class="doctor-image" :alt="doctor.doctorName" v-lazy="DOCTOR_AVATAR+this.$route.query.localDoctorId+'.jpg'"/>
					</div>
					<div class="doctor_message">
						<p class="doctor_name">{{doctor.doctorName}}</p>
						<p class="doctor_type font">{{doctor && DOCTOR_LEVEL[doctor.doctorLevel]}}</p>
						<p class="doctor_department font">科室：{{ doctor.orgDoctorList[0].deptName || '暂无'}}</p>
						<p class="doctor_good font" :title="doctor.speciality">擅长：{{doctor && doctor.speciality && doctor.speciality.substr(0,50)}}...
							<el-tag type="primary"  @click.native="dialog={show: true, title: '擅长', content: doctor && doctor.speciality  || '暂无数据'}">更多 ></el-tag>
						</p>
						
					</div>
				</div>
				<!-- 个人简介 -->
				<div class="more_message">
					<div class="person_introduce">
						<div class="top">
							<img src="../../assets/中医.png" alt="">
							<span>个人简介</span>
						</div>
						<a href="javascript:;" title="查看更多" @click="dialog={show: true, title: '个人简介', content: doctor && doctor.introduce  || '暂无数据'}">查看更多 &gt;</a>
						<p class="introduce">
							{{doctor && doctor.introduce  || '暂无数据'}}
						</p>
					</div>
					<div class="person_introduce">
						<div class="top">
							<img src="../../assets/中医.png" alt="">
							<span>学术成就</span>
						</div>
						<a href="javascript:;" @click="dialog={show: true, title: '学术成就', content: doctor && doctor.scholarShip || '暂无数据'}">查看更多 &gt;</a>
						<p class="introduce">
								{{doctor && doctor.scholarShip || '暂无数据'}}
						</p>
					</div>
				</div>
				<!-- 满意度评价 -->
				<div class="evaluation">
					<p>患者满意度评价</p>
					<form action="" method="get" accept-charset="utf-8">
						<label for="">
						<input type="radio" name="evaluate" value="male" checked>非常满意</label>
						<label for="">
							<input type="radio" name="evaluate" value="male">较满意</label>
						<label for="">
							<input type="radio" name="evaluate" value="male" >不满意</label>
						<label for="">
							<input type="radio" name="evaluate" value="male" >很不满意</label>
						<label for="">
							<input type="radio" name="evaluate" value="male" >说不清楚</label>
						<br>
						<textarea v-model="areaText">	</textarea>
						<div class="send" @click="send">
							发送
						</div>
					</form>
				</div>
			</div>

			<div class="right_content">
				<!-- 公告板 -->
				<div class="bulletin_board">
					<div class="bulletin_board_title">
						<span>公告板</span>
						<a title="">更多 &gt;</a>
					</div>
					<div class="bulletin_board_news">
						<!-- <ul>
							<li v-for="i in 5" :key="i">
								<span class="yuan"></span>
								<span class="news_title">
									<a href="javascript:;" title="">{{doctor.doctorName}}医生本周六门诊取消，给广大患者造成不便，敬请谅解。
									</a>
								</span>
								<span class="date">2017-06-15</span>
							</li>
						</ul> -->
						<div class="no-data"> 暂无数据	</div>
					</div>
				</div>

				<div class="doctor_duty">
					<div class="doctor_duty_title">
						出诊时间表
					</div>
					<div class="doctor_schedule doctor-page">
              <ul>
                <li class="backward">
                  <div title="上一周" :class="['form_title', prevPage ? 'active_arrow': '']" @click="goPrevPage(0, doctor)"></div>
                  <div class="morning">上午</div>
                  <div class="noon">下午</div>
                </li>
								<div class="list-wrapper">
                  <div class="list-scroller" id="listScroller0">
									<li class="single_day" v-for="(day, i) in days" :key="day.orderDate1">
										<div class="form_title">
											{{day.orderDate1}}
											<br/>
											{{day.orderWeek2}}
										</div>
										<div class="morning" v-html="doctorDays[i].morning" @click="appointClickMorning(doctorDays[i], doctor, day)"></div>
										<div class="noon" v-html="doctorDays[i].noon" @click="appointClickNoon(doctorDays[i], doctor, day)"></div>
									</li>
									</div>
								</div>
                <li class="forward">
                  <div title="下一周" :class="['form_title', nextPage ? 'active_arrow': '']" @click="goNextPage(0, doctor)"></div>
                  <div class="morning"></div>
                  <div class="noon"></div>
                </li>
              </ul>
            </div>
				</div>
			</div>
		</div>

		<!-- dialog  -->
		<el-dialog :visible.sync="dialog.show" custom-class=" dialog-common">
			<div class="dialog-title" slot="title">
        {{dialog.title}}
      </div>
			<div style="line-height:2;">{{dialog.content}}</div>
			<div slot="footer" class=" center">
				<a href="javascript:;" class="common-main-button" @click="dialog.show=false">确定</a>
			</div>
		</el-dialog>

		 <div class="mask" v-if="mask_shown">
      <div class="alert_box four-cornor-wrapper">
        <i class="l"></i>
        <i class="r"></i>
        <i class="t"></i>
        <i class="b"></i>
        <div class="box_title">
          <span>用户须知</span>
        </div>
        <b class="clost_btn" v-on:click="mask_shown = false"></b>
        <div class="msg_content">
          <p v-for="msg in msg_content" v-bind:class="msg.class" :key="msg">{{msg.content}}</p>
        </div>
        <div class="center">
						<a href="javascript:;" class="common-main-button" @click="argeeHandle">我已经知晓</a>
        </div>
      </div>
    </div>
  
    <el-dialog :visible.sync="dialogShow" custom-class=" dialog-common">
      
      <div class="dialog-title" slot="title">
        请选择就诊时段 <small class="t1">{{dialogTitle}}</small>
      </div>
      <div class="select-time">
        <div class="time-box" v-for="(time, i) in times" :key="time.startTime">
          <a href="javascript:;" v-if="time.availableCount > 0" @click="timeClick(time, i)" :class="['sprites',time.isActive ? 'active' : '']">{{time.startTime}} - {{time.endTime}}</a>
          <a href="javascript:;" :class="['sprites','disable']" v-else>{{time.startTime}} - {{time.endTime}}</a>
        </div>
      </div>
      <div class="pd20 t4">{{timeTips}}</div>
      <div class="center" slot="footer"> 
					<a href="javascript:;" class="common-main-button" @click="confirmHandle">确定</a>
		<a href="javascript:;" class="common-sub-button" @click="dialogShow = false">取消</a>		
	  </div>
    </el-dialog>

	</div>
</template>
<script>
import Position from "../../components/Position";
import {
  commonAjax,
  ORG_ID,
  PLATFORM_PREFIX,
  APPOINT_TIPS,
  DOCTOR_AVATAR,
  DOCTOR_LEVEL
} from "../../api/api";
export default {
  data() {
    let defaultDoctorDays = [];
    for (let i = 0; i < 8; i++) {
      defaultDoctorDays.push({
        morning: "",
        noon: "",
        morningActive: false,
        noonActive: false,
        morningDepInfo: "",
        noonDepInfo: ""
      });
    }
    return {
      days: [],
      times: [],
      DOCTOR_AVATAR: DOCTOR_AVATAR,
      DOCTOR_LEVEL: DOCTOR_LEVEL,
      doctor: {
        speciality: "",
        orgDoctorList: [{ deptName: "" }]
      },
      doctorDays: defaultDoctorDays,
      prevPage: false,
      nextPage: true,
      areaText: "",
      dialog: {
        show: false,
        title: "提示",
        content: ""
      },
      dialogShow: false,
      dialogTitle: "",
      msg_content: APPOINT_TIPS,
      mask_shown: false,
			isMorning: true,
      person: JSON.parse(localStorage.person || '{}'),
      timeTips: ''
    };
  },
  mounted() {
    document.body.scrollTop = document.documentElement.scrollTop = 0;
    if (!localStorage.accessToken) {
      this.$message({ message: "请先登录", type: "error" });
      return;
    }
    if (!this.$route.query.localDeptId) {
      this.$message({ message: "接收参数有误", type: "error" });
      return;
    }
    // 获取医生基本信息
    this.getDoctorDetailByLocalDoctorId();
    // 获去最近8天日期
		this.init();
		this.findFollowByUid()
  },
  methods: {
    send() {
      this.$store.commit("UPDATE_LOADING");
      setTimeout(() => {
        this.$store.commit("UPDATE_LOADING");
        this.areaText = "";
        this.$message({
          message: "发送成功，感谢您的反馈"
        });
      }, 600);
    },
    init() {
      let _this = this;
      let localDeptId = this.$route.query.localDeptId;
      let localDoctorId = this.$route.query.localDoctorId;
      this.$store.commit("UPDATE_LOADING");
      commonAjax(
        [ORG_ID, "", "", localStorage.appointType || "1"],
        `${PLATFORM_PREFIX}.registrationService`,
        "getTimePeriod"
      )
        .then(res => {
          this.$store.commit("UPDATE_LOADING");
          if (res.data.code === 200) {
            this.days = res.data.body;
            commonAjax(
              [
                ORG_ID,
                localDeptId,
                localDoctorId,
                localStorage.appointType || "1"
              ],
              `${PLATFORM_PREFIX}.registrationService`,
              "getDoctorPlanPc"
            ).then(res => {
              if (res.data.code === 200 && res.data.body) {
                let arrPb = res.data.body;
                this.days.forEach((d, i) => {
                  arrPb.forEach(pb => {
                    _this.getSameDay(d, i, pb);
                  });
                });
              }
            });
          }
        })
        .catch(res => {
          this.$store.commit("UPDATE_LOADING");
        });
    },
    getSameDay(day, index, dep) {
      let _this = this;
      if (dep.workDate === day.orderDate) {
        if (dep.planTime === "1") {
          this.doctorDays[index].morningDepInfo = dep;
          if (dep.stopFlag === "1") {
            this.doctorDays[index].morning =
              '<div class="book_state_5">已停诊</div>';
          } else if (dep.status === "2") {
            this.doctorDays[index].morning =
              '<div class="book_state_4">已约满</div>';
          } else {
            this.doctorDays[index].morning =
              '<div class="book_state_1">可预约</div>';
            this.doctorDays[index].morningActive = true;
          }
        } else {
          this.doctorDays[index].noonDepInfo = dep;
          if (dep.stopFlag === "1") {
            this.doctorDays[index].noon = '<div class="book_state_5">已停诊</div>';
          } else if (dep.status === "2") {
            this.doctorDays[index].noon = '<div class="book_state_4">已约满</div>';
          } else {
            this.doctorDays[index].noon = '<div class="book_state_1">可预约</div>';
            this.doctorDays[index].noonActive = true;
          }
        }
      }
    },
    getDoctorDetailByLocalDoctorId() {
      commonAjax(
        [
          ORG_ID,
          this.$route.query.localDoctorId,
          localStorage.appointType || "1"
        ],
        `${PLATFORM_PREFIX}.doctorService`,
        "getDoctorDetailByLocalDoctorId"
      )
        .then(res => {
          if (res.data.code === 200) {
            this.doctor = res.data.body;
          } else {
            this.$message({
              message: res.data.msg,
              type: "error"
            });
          }
        })
        .catch(err => {
          localStorage.removeItem("accessToken");
          this.$message({
            message: "登录失效，请重新登录",
            type: "error"
          });
        });
    },
    appointClickMorning(doctorDays, doctor, day) {
      this.isMorning = true;
      if (!doctorDays.morningActive) {
        return false;
      }
      this.saveInfo(doctorDays, doctor, day);
    },
    appointClickNoon(doctorDays, doctor, day) {
      this.isMorning = false;
      if (!doctorDays.noonActive) {
        return false;
      }
      this.saveInfo(doctorDays, doctor, day);
    },
    saveInfo(doctorDays, doctor, day) {
      if (this.isMorning) {
        localStorage.dep = JSON.stringify(doctorDays.morningDepInfo);
      } else {
        localStorage.dep = JSON.stringify(doctorDays.noonDepInfo);
      }
      localStorage.doctor = JSON.stringify(doctor);
      localStorage.day = JSON.stringify(day);
      if (localStorage.firstcome === "1") {
        this.argeeHandle();
      } else {
        localStorage.firstcome = "1";
        this.showDialog();
      }
    },
    showDialog() {
      this.mask_shown = true;
      this.msg_content = APPOINT_TIPS;
    },
    argeeHandle() {
      let dep = JSON.parse(localStorage.dep);
      let day = JSON.parse(localStorage.day);
      let localDeptId = this.$route.query.localDeptId;
      let localDoctorId = this.$route.query.localDoctorId;
      // 获取号源时间段
      this.mask_shown = false;
      this.$store.commit("UPDATE_LOADING");
      commonAjax(
        [
          ORG_ID,
          dep.localRegDeptId,
          localDoctorId,
          dep.workDate,
          dep.seqId,
          localStorage.appointType || "1"
        ],
        `${PLATFORM_PREFIX}.registrationService`,
        "getDocAndDeptSouce"
      )
        .then(res => {
          this.$store.commit("UPDATE_LOADING");
          if (res.data.code === 200 && res.data.body.length > 0) {
            this.dialogTitle = `（科室：${dep.deptName} —— 时间：${day.orderDate}）`;
            this.dialogShow = true;
            let d = res.data.body;
            d.forEach(v => (v.isActive = false));
            this.times = d;
          } else {
            this.$message({
              message: "该医生的号源已经预约完",
              type: "error"
            });
          }
        })
        .catch(res => console.warn(res));
    },
    confirmHandle() {
      let isSelect = this.times.some(time => time.isActive === true);
      if (isSelect) {
        this.$router.push("/yygh/confirm");
      } else {
        return false;
      }
    },
    timeClick(time, i) {
      this.times.forEach(v => (v.isActive = false));
      time.isActive = true;
      localStorage.time = JSON.stringify(time);
      if (i === 0) {
        this.timeTips = '请您慎重选择欲诊时间，如果您未按时来院就诊，系统自动将您排在最后，谢谢您的配合！'
      } else {
        this.timeTips = ''
      }
    },
    goNextPage(index) {
      if (!this.nextPage) {
        return false;
      }
      document.getElementById("listScroller" + index).style.transform =
        "translate3d(-50%, 0, 0)";
      this.nextPage = !this.nextPage;
      this.prevPage = !this.prevPage;
    },
    goPrevPage(index) {
      if (!this.prevPage) {
        return false;
      }
      document.getElementById("listScroller" + index).style.transform =
        "translate3d(0, 0, 0)";
      this.nextPage = !this.nextPage;
      this.prevPage = !this.prevPage;
		},
		findFollowByUid () {
			commonAjax([this.person.mpiId, 1, 10], `${PLATFORM_PREFIX}.followService`, "findFollowByUid").then(res => {
				console.log(res)
			})
		}
  },
  components: {
    Position
  }
};
</script>
<style lang="less">
.doctor_home {
  padding-bottom: 60px;
  .el-dialog__body {
    padding: 0 20px 20px;
  }
  .yygh_search {
    width: 1080px;
    margin: 0 auto;
    height: 42px;
    background: url(../../assets/search_bg.png) 0 0 no-repeat;
    line-height: 42px;
    background-size: 100% 100%;
    overflow: hidden;
    margin-top: 30px;
  }
  .yygh_search li {
    float: left;
    list-style: none;
  }
  .yygh_search li a {
    text-decoration: none;
    color: #ffffff;
    font-family: Microsoft YaHei;
    font-size: 14px;
  }
  .yygh_search .hover {
    background: url("../../assets/hover.png") 0 0 no-repeat;
    -webkit-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    display: inline-block;
    line-height: 30px;
    width: 80px;
    margin-left: 30px;
    text-align: center;
  }
  .yygh_search .my_app {
    display: inline-block;
    margin-left: 70px;
    display: inline-block;
    line-height: 30px;
    width: 80px;
    margin-left: 38px;
    text-align: center;
  }
  .yygh_search .my_app:hover {
    background: url("../../assets/hover.png") 0 0 no-repeat;
    background-size: 100% 100%;
  }
  .content {
    width: 1080px;
    margin: 0 auto;
    background-color: #ffffff;
    overflow: hidden;
    padding-bottom: 100px;
  }
  .content .left_content {
    width: 35%;
    float: left;
    margin-left: 15px;
  }
  .content .right_content {
    width: 63%;
    float: right;
    margin-top: 22px;
  }
  .content .left_content .doctor_introduce {
    background: url(../../assets/doctor_introduce.png) 0 0 no-repeat;
    height: 222px;
    width: 360px;
    margin-top: 22px;
    overflow: hidden;
  }

  .content .left_content .doctor_introduce .doctor_img {
    margin-top: 36px;
    margin-left: 10px;
    float: left;
    width: 120px;
  }
  .content .left_content .doctor_introduce .doctor_message {
    margin-top: 30px;
    margin-left: 140px;
  }
  .doctor_message .doctor_name {
    font-size: 18px;
    color: #993300;
    font-weight: bold;
    font-family: Microsoft YaHei;
  }
  .doctor_message .doctor_type {
    margin-top: 0px;
  }
  .doctor_message .doctor_good {
    line-height: 1.3;
    height: 5.8em;
    overflow: hidden;
    .el-tag {
      cursor: pointer;
    }
  }
  .doctor_introduce .apply {
    width: 80px;
    height: 22px;
    border: 1px solid #999966;
    margin-top: 30px;
    font-size: 14px;
    color: #999966;
    border-radius: 4px;
    margin-top: 46px;
    margin-left: 10px;
  }
  .doctor_introduce .apply img {
    margin-left: 2px;
  }
  .more_message {
    background: url(../../assets/医生bg.png) 0 0 no-repeat;
    -webkit-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    width: 360px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .more_message .person_introduce .top {
    background: url(../../assets/中医_bottom.png) 0 0 no-repeat;
    -webkit-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    width: 100px;
    text-align: center;
    margin-left: 5px;
  }
  .person_introduce .introduce {
    height: 195px;
    overflow: hidden;
  }
  .more_message .person_introduce .top span {
    font-size: 16px;
    color: rgb(158, 49, 15);
  }
  .more_message .person_introduce .top img {
    vertical-align: middle;
  }
  .more_message .person_achievement .bottom img {
    vertical-align: middle;
  }
  .more_message .person_introduce a {
    display: inline-block;
    margin-left: 170px;
    font-size: 14px;
    color: #ff6600;
  }
  .more_message .person_introduce p {
    font-size: 14px;
    color: #663333;
    width: 340px;
    margin: 20px auto;
  }
  .more_message .person_achievement .bottom {
    background: url(../../assets/中医_bottom.png) 0 0 no-repeat;
    -webkit-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    padding-left: 10px;
    width: 100px;
    text-align: center;
    margin-left: 5px;
  }
  .more_message .person_achievement .bottom span {
    font-size: 16px;
    color: #993300;
  }
  .more_message .person_achievement a {
    display: inline-block;
    margin-left: 170px;
    font-size: 14px;
    color: #ff6600;
  }
  .more_message .person_achievement p {
    font-size: 14px;
    color: #663333;
    width: 340px;
    margin: 20px auto;
    text-indent: 2em;
  }
  .evaluation label {
    font-size: 13px;
    color: #333333;
    font-family: Microsoft YaHei;
  }
  .evaluation {
    margin-top: 20px;
  }
  .evaluation p {
    font-size: 16px;
    color: #993300;
    margin-bottom: 20px;
  }
  .evaluation textarea {
    height: 72px;
    width: 360px;
    resize: none;
    margin-top: 20px;
  }
  .evaluation .send {
    background: url(../../assets/send.png);
    width: 114px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #ffcc99;
    font-size: 14px;
    margin: 20px auto;
    cursor: pointer;
  }
  .right_content .bulletin_board {
    width: 668px;
    height: 250px;
    border: 1px solid #cccccc;
  }
  .right_content .bulletin_board .bulletin_board_title {
    height: 32px;
    line-height: 32px;
    background-color: rgb(248, 230, 206);
  }
  .right_content .bulletin_board .bulletin_board_title span {
    font-family: "FZLiShu-S01S";
    color: rgb(158, 49, 15);
    font-size: 18px;
    margin-left: 20px;
  }
  .right_content .bulletin_board .bulletin_board_title a {
    font-size: 12px;
    font-family: "Microsoft YaHei";
    color: rgb(102, 102, 102);
    text-decoration: none;
    margin-left: 520px;
  }
  .right_content .bulletin_board .bulletin_board_news .yuan {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgb(169, 82, 36);
    margin-left: 22px;
    margin-right: 14px;
  }
  .right_content .bulletin_board .bulletin_board_news .news_title a {
    display: inline-block;
    font-size: 14px;
    font-family: "Microsoft YaHei";
    color: rgb(51, 51, 51);
    width: 520px;
  }
  .right_content .bulletin_board .bulletin_board_news .date {
    font-size: 14px;
    font-family: "Microsoft YaHei";
    display: inline-block;
    color: #999999;
  }
  .right_content .bulletin_board .bulletin_board_news li {
    margin-top: 16px;
  }
  .right_content .doctor_duty .doctor_duty_title {
    font-family: "FZLiShu-S01S";
    color: rgb(158, 49, 15);
    font-size: 18px;
    width: 670px;
    height: 32px;
    background-color: rgb(248, 230, 206);
    line-height: 32px;
  }
  .right_content .doctor_duty .doctor_duty_title {
    padding-left: 20px;
  }
  .right_content .doctor_duty {
    margin-top: 40px;
  }
  .doctor_duty table {
    border: 1px solid #cccccc;
  }
  .doctor_duty table th {
    background-color: rgb(253, 245, 239);
  }
  .doctor_duty table td {
    text-align: center;
  }
  .doctor_duty table .message {
    height: 60px;
  }
}
</style>